<template>
    <!--
        1、index.html中也有id=app，但是最终dom结构中只会有一个，因为vue会占据挂载点的内容，这就是说用于不要
            将内容挂到document.body上；
        2、loadging是一个普通的全局插件，用于异步请求时产生一个遮罩效果，只是其显示、隐藏需要状态管理，
            并且配合axios控制，这样用户不需要再每个请求前显示、请求后隐藏。
    -->
    <div id="app">           
        <loading v-show="isShowLoading"></loading>
        <router-view></router-view>  
    </div>
</template>

<script type="text/javascript">
    import {mapState , mapActions} from 'vuex';     //状态管理辅助函数
    export default {
        name:"App",
        computed:{
            ...mapState(['isShowLoading'])
        }
    }
</script> 

<style scoped>
    div#app{
        width: 100%;
        height: 100%;
    }
</style>